<!-- 缴费函配置 -->
<template>
  <div class="">
    <a-form-model :model="tempFileForm" :label-col="labelCol" :wrapper-col="wrapperCol" style="margin-top: 20px">
      <a-form-model-item label="缴费函启用设置">
        <a-switch v-model="tempFileForm.isDownPay" disabled />
        <span class="_ml-10">开启后用户在缴费时可查看管理员设置的正式缴费函</span>
      </a-form-model-item>

      <a-form-model-item label="缴费函上传" v-if="tempFileForm.isDownPay">
        <div style="display: flex; align-items: center">
          <UploadFile desc="" @uploadSuccess="(file) => uploadFileSuccess(file, 'payFileUrl')" />
          <a-button
            v-if="tempFileForm.payFileUrl"
            type="link"
            @click="handleDownLoad(tempFileForm.payFileUrl, '缴费函')"
            >下载缴费函模板（修改模板内容字体要用宋体）</a-button
          >
        </div>
        <div class="fw-6">文件仅支持doc,docx</div>
      </a-form-model-item>

      <a-form-model-item label="续费函启用设置" class="_mt-50">
        <a-switch v-model="tempFileForm.isDownReply" disabled />
        <span class="_ml-10">开启后用户在续费时可查看管理员设置的缴费函</span>
      </a-form-model-item>

      <a-form-model-item label="续费函上传" v-if="tempFileForm.isDownReply">
        <div style="display: flex; align-items: center">
          <UploadFile @uploadSuccess="(file) => uploadFileSuccess(file, 'replyFileUrl')" />
          <a-button
            v-if="tempFileForm.replyFileUrl"
            type="link"
            @click="handleDownLoad(tempFileForm.replyFileUrl, '续费函')"
          >
            下载续费函模板（修改模板内容字体要用宋体）</a-button
          >
        </div>
        <div class="fw-6">文件仅支持doc,docx</div>
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center">
          <a-button type="primary" size="large" :loading="submitLoading" style="width: 400px" @click="handleSubmit">
            保存
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile'

import { UpdateApplyTemplateFile, getByIdApplyTemplate } from '@/api/member/memberConfig'
export default {
  components: {
    UploadFile,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      tempFileForm: {
        customFormId: undefined,
        isDownPay: false,
        payFileUrl: undefined,
        isDownReply: false,
        replyFileUrl: undefined,
      },
      type: undefined,
      submitLoading: false,
    }
  },
  computed: {},
  watch: {},
  methods: {
    async GetByIdApplyTemplate() {
      let res = await getByIdApplyTemplate(this.type)
      Object.keys(this.tempFileForm).forEach((k) => {
        if (k === 'isDownPay' || k === 'isDownReply') {
          this.tempFileForm[k] = res.data[k] === 1
        } else {
          this.tempFileForm[k] = res.data[k]
        }
      })
    },
    uploadFileSuccess(file, field) {
      this.tempFileForm[field] = file
    },
    handleDownLoad(url, name) {
      window.open(url + `?attname=${name}.docx`, '_self')
    },
    async handleSubmit() {
      try {
        this.submitLoading = true
        let { isDownPay, isDownReply } = this.tempFileForm
        await UpdateApplyTemplateFile({
          ...this.tempFileForm,
          isDownPay: isDownPay ? 1 : 0,
          isDownReply: isDownReply ? 1 : 0,
        })
        this.submitLoading = false
        this.$message.success('保存成功')
      } catch (error) {
        this.submitLoading = false
      }
    },
  },
  created() {
    this.type = this.$route.query.type
    this.GetByIdApplyTemplate()
  },
  mounted() {},
}
</script>
<style scoped>
</style>